$(function(){
var jcrop_api, boundx, boundy, xsize, ysize,uploadData,imgWidth,imgHeight;
	var $preview = $('#imgFloatm');
	var $pcnt = $('#imgFloatm .preview-m-con');
	var $pimg = $('#imgFloatm .preview-m-con img');
	var $preview2 = $('.img-float-r');
	var $pcnt2 = $('.img-float-r .preview-r-con');
	var $pimg2 = $('.img-float-r .preview-r-con img');
	$('body').delegate("#fileInput","change",function(){
		preImg('fileInput','target','standardDiv');
	})
	$('body').delegate("#triggerFile","click",function(){
		$('#fileInput').click();
			$preview = $('#imgFloatm');
			$pcnt = $('#imgFloatm .preview-m-con');
			$pimg = $('#imgFloatm .preview-m-con img');
			$preview2 = $('.img-float-r');
			$pcnt2 = $('.img-float-r .preview-r-con');
			$pimg2 = $('.img-float-r .preview-r-con img');
	});

	
var initDemo = function(obj,url) {
	xsize = obj.width(), ysize = obj.height();
	console.log('init', [ xsize, ysize ]);
	//console.log(obj.attr("id"));
	$('#target').Jcrop({
		allowSelect : false,
		onChange : updatePreview,
		onSelect : updatePreview,
		setSelect : [ 0, 0, xsize, ysize ],
		aspectRatio : xsize / ysize,
		boxWidth : 300,
		boxHeight : 300
	}, function() {
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		jcrop_api = this;
		
		$preview.appendTo(jcrop_api.ui.holder);
     	$pimg.attr("src",url);
     	$pimg2.attr("src",url);
	});
	function updatePreview(c) {
		if (parseInt(c.w) > 0) {
			var rx = xsize / c.w;
			var ry = ysize / c.h;
			
			var le;
			if(imgWidth/300>imgHeight/300){
				le=imgWidth/300;
			}else{
				le=imgHeight/300;
			}
			if(le<1){
				le=1;
			}
			/*
			 *uploadData为裁剪坐标，即为最终裁剪图片的JSON格式
			 * */
			uploadData = {
				top : parseInt(Math.round(c.x)*le),
				left : parseInt(Math.round(c.y)*le),
				width : parseInt(Math.round(c.w)*le),
				height : parseInt(Math.round(c.h)*le)
			};
			$pimg.css({
				width: Math.round(rx * boundx) + 'px',
				height: Math.round(ry * boundy) + 'px',
				marginLeft: '-' + Math.round(rx * c.x) + 'px',
				marginTop: '-' + Math.round(ry * c.y) + 'px'
			});
			$pimg2.css({
				width: Math.round(rx * boundx*0.7) + 'px',
				height: Math.round(ry * boundy*0.7) + 'px',
				marginLeft: '-' + Math.round(rx * c.x*0.7) + 'px',
				marginTop: '-' + Math.round(ry * c.y*0.7) + 'px'
			});
		}
	};
};





function getFileUrl(sourceId){
	var url;
	if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1){
		url = window.webkitURL.createObjectURL(document.getElementById(sourceId).files.item(0));
	}else{
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
	}
	return url;	
}
function preImg(sourceId,targetId,standardDiv){
	var url = getFileUrl(sourceId);
	var imgPre = document.getElementById(targetId);
	imgPre.src = url;

	var newImg = new Image(); // 新建一个图片对象
	
	$(newImg).attr("src" , url); // 将图片的src属性赋值给新建图片对象的src
	newImg.onload = function() {
		imgWidth = newImg.width;
		imgHeight = newImg.height;
		boundx=imgWidth;
		boundy=imgHeight;
		if(imgWidth > 300 || imgHeight > 300){
			if(imgWidth/300 > imgHeight/300){
				$("#"+targetId).css({
					width : '300px',
					height : parseInt(imgHeight/(imgWidth/300))+'px'
				});
			} else {
				$("#"+targetId).css({
					width : parseInt(imgWidth/(imgHeight/300))+'px',
					height : '300px'
				});
			}
		}
		if (jcrop_api == undefined || jcrop_api == "" || jcrop_api == null) {
			initDemo($("#" + standardDiv),url);
		} else {
			jcrop_api.setImage(url);
			
			$pimg.attr("src",url);
			$pimg2.attr("src",url);
			jcrop_api.setOptions({
				setSelect : [ 0, 0, xsize, ysize ],
				aspectRatio : xsize / ysize
			});
		}
	}
}

});
